<template>
  <el-card class="card-box">
      <template #header>
          <div class="card-header">
            <span>客流所属地分布图</span>
          </div>
      </template>
      <div class='chart-wrap'>
        <div  ref="chartRef" class="chart-content" v-show="isShowChart"></div>
        <el-empty description="暂无数据" v-show="!isShowChart"/>
      </div>
  </el-card>
</template>

<script setup>
  import * as echarts from 'echarts';
  // import china from '@/utils/china.json'
  import china from '@/utils/geojson.json'
  import {getChartMapOption } from '../../echartOption'
  const props = defineProps({
    statisticData:{
      type:Array,
      default:()=>[]
    }
  })
  let isShowChart = ref(false);
  let chatData = reactive([]);
  const echartsInstance = shallowRef(null);
  const chartRef = shallowRef();
    const initChart = ()=>{
      const mapData = chatData.map(item => {
        return {
          name:item?.provinceName,
          value:item?.customerNum || 0,
        }
      })
      const maxNum = Math.max(...mapData.map(item => item?.value))
      echartsInstance.value = null;
      echarts.registerMap('china', china)
      echartsInstance.value = echarts.init(chartRef.value, null, {renderer:'svg'})
      const option = getChartMapOption(mapData,maxNum,false)
      echartsInstance.value.setOption(option,true)
      window.addEventListener('resize', resize);
    }

    const resize = () =>{
      if(echartsInstance.value){
        echartsInstance.value?.resize()
      }
    };

    onUnmounted(() => {
      // 组件卸载时销毁图表实例
      if(echartsInstance.value){
        echartsInstance.value.dispose();
      }
    });
    watch(() => props.statisticData,(newValue)=>{
      if(newValue?.length){
        chatData = newValue;
        isShowChart.value = true
        nextTick(() => {
          initChart()
          resize()
        })
      }
      else{
        chatData = [];
        isShowChart.value = false
      }
    },
    {
      deep: true,
      immediate: true
    })
</script>
<style lang="scss" scoped>
.card-box{
  width: 33%;
  .chart-wrap{
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    .chart-content{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
